<div [@routerTransition]>
  <div class="m-subheader ">
    <div class="d-flex align-items-center">
      <div class="mr-auto col-xs-6">
        <h3 class="m-subheader__title m-subheader__title--separator">
          <span>日历管理</span>
        </h3>
        <span class="m-section__sub">
          日历管理的文本头信息
        </span>
      </div>
      <div class="col-xs-6 text-right">
        <button
          (click)="createOrEditScheduleModal.show()"
          *ngIf="isGranted('Pages.Resource.Equipment.Schedule.Operation')"
          class="btn btn-primary blue"
        >
          <i class="fa fa-plus"></i> 创建新的日历
        </button>
      </div>
    </div>
  </div>

  <div class="m-content">
    <div class="m-portlet m-portlet--mobile">
      <div class="m-portlet__body">
        <form class="horizontal-form" autocomplete="off">
          <div class="m-form m-form--label-align-right">
            <div class="row align-items-center m--margin-bottom-10">
              <div class="col-xl-12">
                <div class="form-group m-form__group align-items-center">
                  <div class="input-group">
                    <input
                      [(ngModel)]="filterText"
                      name="filterText"
                      autoFocus
                      class="form-control m-input"
                      [placeholder]="l('SearchWithThreeDot')"
                      type="text"
                    />
                    <span class="input-group-btn">
                      <button
                        (click)="getSchedules()"
                        class="btn btn-primary"
                        type="submit"
                      >
                        <i
                          class="flaticon-search-1"
                          [attr.aria-label]="l('Search')"
                        ></i>
                      </button>
                    </span>
                  </div>
                </div>
              </div>
            </div>

            <div
              class="row m--margin-bottom-10"
              [hidden]="!advancedFiltersAreShown"
            >
              <div class="col-md-6">
                <div class="form-group">
                  <label class="control-label">工作日:</label>
                  <div class="m-checkbox-inline">
                    <label
                      class="m-checkbox m-checkbox--bold m-checkbox--state-success"
                    >
                      <input
                        type="checkbox"
                        name="workDay"
                        [(ngModel)]="workDays[0]"
                      />
                      一
                      <span></span>
                    </label>
                    <label
                      class="m-checkbox m-checkbox--bold m-checkbox--state-success"
                    >
                      <input
                        type="checkbox"
                        name="workDay"
                        [(ngModel)]="workDays[1]"
                      />
                      二
                      <span></span>
                    </label>
                    <label
                      class="m-checkbox m-checkbox--bold m-checkbox--state-success"
                    >
                      <input
                        type="checkbox"
                        name="workDay"
                        [(ngModel)]="workDays[2]"
                      />
                      三
                      <span></span>
                    </label>
                    <label
                      class="m-checkbox m-checkbox--bold m-checkbox--state-success"
                    >
                      <input
                        type="checkbox"
                        name="workDay"
                        [(ngModel)]="workDays[3]"
                      />
                      四
                      <span></span>
                    </label>
                    <label
                      class="m-checkbox m-checkbox--bold m-checkbox--state-success"
                    >
                      <input
                        type="checkbox"
                        name="workDay"
                        [(ngModel)]="workDays[4]"
                      />
                      五
                      <span></span>
                    </label>
                    <label
                      class="m-checkbox m-checkbox--bold m-checkbox--state-success"
                    >
                      <input
                        type="checkbox"
                        name="workDay"
                        [(ngModel)]="workDays[5]"
                      />
                      六
                      <span></span>
                    </label>
                    <label
                      class="m-checkbox m-checkbox--bold m-checkbox--state-success"
                    >
                      <input
                        type="checkbox"
                        name="workDay"
                        [(ngModel)]="workDays[6]"
                      />
                      日
                      <span></span>
                    </label>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label class="control-label">优先级:</label>
                  <input
                    type="number"
                    name="priority"
                    class="form-control"
                    min="1"
                    max="86400000"
                    [(ngModel)]="priority"
                  />
                </div>
              </div>
            </div>

            <div class="row margin-bottom-10" *ngIf="advancedFiltersAreShown">
              <div class="col-sm-12 text-right">
                <button class="btn btn-metal" (click)="getSchedules()">
                  <i class="fa fa-refresh"></i> {{ l("Refresh") }}
                </button>
              </div>
            </div>
            <div class="row margin-bottom-10">
              <div class="col-sm-12">
                <span
                  class="clickable-item text-muted"
                  *ngIf="!advancedFiltersAreShown"
                  (click)="advancedFiltersAreShown = !advancedFiltersAreShown"
                  ><i class="fa fa-angle-down"></i>
                  {{ l("ShowAdvancedFilters") }}</span
                >
                <span
                  class="clickable-item text-muted"
                  *ngIf="advancedFiltersAreShown"
                  (click)="advancedFiltersAreShown = !advancedFiltersAreShown"
                  ><i class="fa fa-angle-up"></i>
                  {{ l("HideAdvancedFilters") }}</span
                >
              </div>
            </div>
          </div>
        </form>

        <div class="row align-items-center">
          <!--<Primeng-TurboTable-Start>-->
          <div
            class="primeng-datatable-container"
            [busyIf]="primengTableHelper.isLoading"
          >
            <p-table
              #dataTable
              (onLazyLoad)="getSchedules($event)"
              [value]="primengTableHelper.records"
              rows="{{ primengTableHelper.defaultRecordsCountPerPage }}"
              [paginator]="false"
              [lazy]="true"
              [scrollable]="true"
              ScrollWidth="100%"
              [responsive]="primengTableHelper.isResponsive"
              [resizableColumns]="primengTableHelper.resizableColumns"
            >
              <ng-template pTemplate="header">
                <tr>
                  <th
                    style="width: 130px"
                    [hidden]="
                      !isGrantedAny(
                        'Pages.Resource.Equipment.Schedule.Operation'
                      )
                    "
                  >
                    {{ l("Actions") }}
                  </th>
                  <th style="width: 250px">
                    工作日
                  </th>
                  <th style="width: 150px">
                    早班
                  </th>
                  <th style="width: 150px">
                    午班
                  </th>
                  <th style="width: 150px">
                    晚班
                  </th>
                  <th style="width: 150px" pSortableColumn="validTimeStart">
                    开始时间
                    <p-sortIcon field="validTimeStart"></p-sortIcon>
                  </th>
                  <th style="width: 150px" pSortableColumn="validTimeEnd">
                    截止时间
                    <p-sortIcon field="validTimeEnd"></p-sortIcon>
                  </th>
                  <th style="width: 150px" pSortableColumn="priority">
                    优先级
                    <p-sortIcon field="priority"></p-sortIcon>
                  </th>
                  <th style="width: 200px">
                    备注
                  </th>
                </tr>
              </ng-template>
              <ng-template pTemplate="body" let-record="$implicit">
                <tr>
                  <td
                    style="width: 130px"
                    [hidden]="
                      !isGrantedAny(
                        'Pages.Resource.Equipment.Schedule.Operation'
                      )
                    "
                  >
                    <div class="btn-group dropdown" normalizePosition>
                      <button
                        class="dropdown-toggle btn btn-sm btn-primary"
                        data-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false"
                      >
                        <i class="fa fa-cog"></i><span class="caret"></span>
                        {{ l("Actions") }}
                      </button>
                      <ul class="dropdown-menu">
                        <li>
                          <a
                            (click)="createOrEditScheduleModal.show(record.id)"
                            >{{ l("Edit") }}</a
                          >
                        </li>
                        <li>
                          <a (click)="deleteSchedule(record)">{{
                            l("Delete")
                          }}</a>
                        </li>
                        <li>
                          <a
                            (click)="
                              boundEquipmentSchedulesModal.show(record.id)
                            "
                            >绑定设备</a
                          >
                        </li>
                      </ul>
                    </div>
                  </td>
                  <td style="width: 250px">
                    <span class="ui-column-title"> 工作日</span>
                    {{ record.workDay }}
                  </td>
                  <td style="width: 150px">
                    <span class="ui-column-title"> 早班</span>
                    {{
                      record.zaoBanStart.substring(0, 5) +
                        " -- " +
                        record.zaoBanEnd.substring(0, 5)
                    }}
                  </td>
                  <td style="width: 150px">
                    <span class="ui-column-title"> 午班</span>
                    {{
                      record.zhongBanStart.substring(0, 5) +
                        " -- " +
                        record.zhongBanEnd.substring(0, 5)
                    }}
                  </td>
                  <td style="width: 150px">
                    <span class="ui-column-title"> 晚班</span>
                    {{
                      record.wanBanStart.substring(0, 5) +
                        " -- " +
                        record.wanBanEnd.substring(0, 5)
                    }}
                  </td>
                  <td style="width: 150px">
                    <span class="ui-column-title"> 开始时间</span>
                    {{ record.validTimeStart | momentFormat: "YYYY-MM-DD" }}
                  </td>
                  <td style="width: 150px">
                    <span class="ui-column-title"> 截止时间</span>
                    {{ record.validTimeEnd | momentFormat: "YYYY-MM-DD" }}
                  </td>
                  <td style="width: 150px">
                    <span class="ui-column-title"> 优先级</span>
                    {{ record.priority }}
                  </td>
                  <td style="width: 200px">
                    <span class="ui-column-title"> 备注</span>
                    {{ record.remark }}
                  </td>
                </tr>
              </ng-template>
            </p-table>
            <div
              class="primeng-no-data"
              *ngIf="primengTableHelper.totalRecordsCount == 0"
            >
              {{ l("NoData") }}
            </div>
            <div class="primeng-paging-container">
              <p-paginator
                rows="{{ primengTableHelper.defaultRecordsCountPerPage }}"
                #paginator
                (onPageChange)="getSchedules($event)"
                [totalRecords]="primengTableHelper.totalRecordsCount"
                [rowsPerPageOptions]="
                  primengTableHelper.predefinedRecordsCountPerPage
                "
              >
              </p-paginator>
              <span class="total-records-count">
                共计：{{ primengTableHelper.totalRecordsCount }}
              </span>
            </div>
          </div>
          <!--<Primeng-TurboTable-End>-->
        </div>
      </div>
    </div>
  </div>
  <createOrEditScheduleModal
    #createOrEditScheduleModal
    (modalSave)="getSchedules()"
  ></createOrEditScheduleModal>
  <boundEquipmentSchedulesModal
    #boundEquipmentSchedulesModal
    (modalSave)="getSchedules()"
  ></boundEquipmentSchedulesModal>
</div>
